import type { FC } from "react";
import { useAccentColor } from "../hooks/useAccentColor";
import { getRgb } from '../utils';
import { context } from "../context";
import { SkillList, SkillListItem } from "./style";

interface IndexProps {
  item: Entries
  name: Sections
}

const Index: FC<IndexProps> = ({ item, name }) => {
  const { resume: { customization } } = context

  const { layout, sectionOrder, applyAccentColor, title } = customization
  const [color] = useAccentColor(name)
  const style = {
    flex: '0 1 40%'
  }
  const progressBarStyle: any = {}
  if (applyAccentColor?.includes('progressBars')) {
    progressBarStyle.background = color
  }
  const ocupy = []
  if (layout.colsFromDetails[layout.detailsPosition] === 'two') {
    if (sectionOrder.two.leftSectionChildren.includes(name)) {
      if (layout.colWidthsFromDetails[layout.detailsPosition].leftWidth < 60) {
        style.flex = '0 1 100%'
      }
    }
    if (sectionOrder.two.rightSectionChildren.includes(name)) {
      if (layout.colWidthsFromDetails[layout.detailsPosition].rightWidth < 60) {
        style.flex = '0 1 100%'
      }
    }
  }
  else {
    style.flex = '0 1 30%'
    if ((item?.list?.length + 1) % 3 === 0) {
      ocupy.push(null)
    }
  }
  if (!item?.list || !item.list?.length) {
    return null
  }
  return <SkillList>
    {
      [...item.list, ...ocupy].map((skill, index) => {
        return <SkillListItem key={index} style={style}>
          {
            skill
              ? <>
                {skill.name}
                <div className={'progressWrap'}>
                  <div className={'progress'} >
                    <span className={'progressBar'} style={{ "width": `${(skill.value + 1) * 25}%`, ...progressBarStyle, '---bkg': getRgb(title?.titleBkg) }}>
                    </span>
                  </div>
                  {/* <div>{getSkillName(skill.value)}</div> */}
                </div>
              </>
              : null
          }

        </SkillListItem>
      })
    }
  </SkillList>
}

export default Index;
